<template>
  <div class="detailWrap">
    <van-nav-bar
      title="用户详情"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    ></van-nav-bar>
    <van-cell-group class="group_content" v-if="username">
      <img
        v-if="headPic"
        :src="headPic.content"
        alt=""
        ref="headPic"
        class="headPicHeight"
      />
      <img
        v-else
        src="static/images/headPic.png"
        alt=""
        ref="headPic"
        class="headPicHeight"
      />
      <van-field v-model="username" label="用户名" disabled />
      <van-field v-model="phone" label="手机号" disabled />
      <van-field v-model="sex" label="性别" disabled />
      <van-field v-model="college" label="学院" disabled />
      <van-field v-model="email" label="邮箱" disabled />
      <van-field v-model="role" label="角色" disabled />
      <van-field v-model="lastSignInTime" label="最后登录时间" disabled />
    </van-cell-group>
    <van-empty description="用户不存在或者已注销" v-else />
  </div>
</template>

<script>
import { getUser } from "@/views/api/api.js";
export default {
  components: {},
  data() {
    return {
      route_username: "",
      headPic: "",
      username: "",
      phone: "",
      sex: "",
      college: "",
      role: "",
      lastSignInTime: "",
      email: "",
      user: "",
      id: "",
    };
  },
  computed: {},
  created() {
    this.init();
  },
  methods: {
    // 初始化数据
    init() {
      this.id = this.$route.query.id;
      let params = {
        id: this.id,
      };
      getUser(params).then((res) => {
        if (!res.data.code) {
          this.username = res.data.Info[0].username;
          this.headPic = res.data.Info[0].headPic;
          this.phone = res.data.Info[0].phone;
          if (+res.data.Info[0].sex === 1) {
            this.sex = "男";
          } else {
            this.sex = "女";
          }
          this.college = res.data.Info[0].college;
          if (+res.data.Info[0].role === 1) {
            this.role = "老师";
          } else if (+res.data.Info[0].role === 2) {
            this.role = "学生";
          } else {
            this.role = "管理员";
          }
          this.email = res.data.Info[0].email;
          this.headPic = res.data.Info[0].headPic;
          this.lastSignInTime = res.data.Info[0].lastSignInTime;
          // UTC时间标准时间格式转通用时间格式
          if (this.lastSignInTime) {
            this.lastSignInTime = this.utc2beijing(this.lastSignInTime);
          }
        } else {
          // 查询失败
          // Toast.fail(res.data.msg);
        }
      });
    },
    // 点击返回
    onClickLeft() {
      this.$router.go(-1);
    },
    // 时间戳转为时间
    timestampToTime(timestamp) {
      var date = new Date(timestamp); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "年";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "日 ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    // UTC时间格式转通用格式时间
    // eslint-disable-next-line camelcase
    utc2beijing(utc_datetime) {
      // 转为正常的时间格式 年-月-日 时:分:秒
      // eslint-disable-next-line camelcase
      var T_pos = utc_datetime.indexOf("T");
      // eslint-disable-next-line camelcase
      var Z_pos = utc_datetime.indexOf("Z");
      // eslint-disable-next-line camelcase
      var year_month_day = utc_datetime.substr(0, T_pos);
      // eslint-disable-next-line camelcase
      var hour_minute_second = utc_datetime.substr(
        // eslint-disable-next-line camelcase
        T_pos + 1,
        // eslint-disable-next-line camelcase
        Z_pos - T_pos - 1
      );
      // eslint-disable-next-line camelcase
      var new_datetime = year_month_day + " " + hour_minute_second; // 2017-03-31 08:02:06

      // 处理成为时间戳
      // eslint-disable-next-line no-use-before-define
      timestamp = new Date(Date.parse(new_datetime));
      // eslint-disable-next-line no-use-before-define
      timestamp = timestamp.getTime();
      // eslint-disable-next-line no-use-before-define
      timestamp = timestamp / 1000;

      // 增加8个小时，北京时间比utc时间多八个时区
      // eslint-disable-next-line no-use-before-define
      var timestamp = timestamp + 8 * 60 * 60;

      // 时间戳转为时间
      // eslint-disable-next-line camelcase
      var beijing_datetime = this.timestampToTime(timestamp * 1000);
      // eslint-disable-next-line camelcase
      return beijing_datetime; // 2017-03-31 16:02:06
    },
  },
};
</script>
<style scoped>
.headPicHeight {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}
.group_content {
  margin-top: 46px;
}
</style>
